<template>
  <div class="content">
    <el-card class="card-box">
      <div class="card-box--headerwrap">
        <el-page-header content="详情" @back="goback"></el-page-header>
        <div class="card-box--setbtn">
          <el-button @click="goback">取消</el-button>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="card-box form-box">
      <el-form
        ref="formRef"
        @submit.prevent
        :model="formState"
        :rules="Rules"
        label-width="120px"
      >
        <el-form-item
          label="标题内容"
          placeholder="请输入标题内容"
          prop="title"
        >
          <el-input v-model="formState.title" class="width-custom220" />
        </el-form-item>
        <el-form-item
          label="消息类型"
          placeholder="请选择消息类型"
          prop="msgType"
        >
          <el-select v-model="formState.msgType">
            <el-option
              class="default-option"
              v-for="item in infoManageType"
              :label="item.key"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知内容" placeholder="通知内容" prop="content">
          <el-input
            v-model="formState.content"
            type="textarea"
            :row="3"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="文档权限" prop="documentAuth">
          <el-input v-model="formState.documentAuth"></el-input>
        </el-form-item> -->
        <el-form-item label="紧急程度" prop="msgLevel">
          <el-select v-model="formState.msgLevel">
            <el-option
              class="default-option"
              v-for="item in infoUrgentType"
              :label="item.key"
              :key="item.value"
              :value="item.value"
              ><div :class="item.color" class="labelFlag"></div>
              <span>{{ item.key }}</span>
            </el-option>
          </el-select>

          <el-tooltip
            class="item"
            effect="dark"
            content="红色代表非常紧急，黄色代表一般紧急"
            placement="right"
          >
            <i class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>

        <!-- <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker
            v-model="formState.publishTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期"
            :disabledDate="disabledDate"
          ></el-date-picker>
        </el-form-item> -->

        <!-- <el-form-item label="停用时间" prop="publishEndTime">
          <el-date-picker
            v-model="formState.publishEndTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期"
            :disabledDate="disabledDate"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formState.remark"
            type="textarea"
            :row="3"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted
  // computed,
} from "vue";
import { cloneDeep } from "lodash-es";
import { useRouter, useRoute } from "vue-router";
import NotifMessage from "/@/utils/message/notification";
import * as api from "/@/api/notice";

import { infoManageType, infoUrgentType } from "../types";

// const projectRef = ref<HTMLElement | null>(null) as any;
// const projectTreeRef = ref<HTMLElement | null>(null) as any;
const formRef = ref<HTMLFormElement | null>(null) as any;

const router = useRouter();
const route = useRoute();

const formState = reactive({
  content: "",
  title: "",
  msgType: "",
  // documentAuth: "",
  remark: "",
  publishTime: "",
  msgLevel: "",
  publishEndTime: ""
});

const Rules = {
  content: [{ required: true, message: "请输入消息内容", trigger: "blur" }],
  title: [{ required: true, message: "请输入消息标题", trigger: "change" }],
  msgType: [{ required: true, message: "请选择消息类型", trigger: "change" }],
  msgLevel: [{ required: true, message: "请选择紧急程度", trigger: "change" }]
  // publishTime: [
  //   { required: true, message: "请选择发布时间", trigger: "change" }
  // ],
  // publishEndTime: [
  //   { required: true, message: "请选择结束时间", trigger: "change" }
  // ]
};

// let isEdit = computed(() => {
//   // @ts-ignore
//   if (["edit"].includes(route.query.mode)) {
//     return true;
//   } else {
//     return false;
//   }
// });

// const disabledDate = time => {
//   return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
// };

const goback = () => {
  router.push("/system/notice");
};

const getDetail = async () => {
  const params = {
    id: route.query.id
  };
  const { code, data } = await api.postMessageInfo(params);
  if (code === 200) {
    const {
      content,
      title,
      msgType,
      publishTime,
      msgLevel,
      publishEndTime,
      remark
    } = data;

    formState.content = content;
    formState.title = title;

    formState.publishTime = publishTime;
    formState.msgLevel = msgLevel;
    formState.publishEndTime = publishEndTime;

    formState.msgType = msgType;

    formState.remark = remark;
  }
};

const handleSubmit = async () => {
  const isValid = await new Promise(resolve => formRef.value.validate(resolve));
  if (!isValid) return;
  const copyFormData = cloneDeep(formState);
  console.log(copyFormData, "copyFormData");

  if (route.query.mode === "add") {
    const { code, message } = await api.postMessageAdd(copyFormData);

    if (code === 200) {
      NotifMessage.success("保存成功");
      goback();
    } else {
      NotifMessage.error(message);
    }
  } else {
    const { code, message } = await api.postMessageUpdate(
      Object.assign(copyFormData, { id: route.query.id })
    );
    if (code === 200) {
      NotifMessage.success("修改成功");
      goback();
    } else {
      NotifMessage.error(message);
    }
  }
};

onMounted(() => {
  if (route.query.mode !== "add") {
    getDetail();
  }
});
</script>

<style lang="scss" scoped>
.content {
  :deep .el-page-header__content {
    font-size: 16px;
  }
  .card-box {
    margin-bottom: 10px;
    &--headerwrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &--setbtn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 140px;
    }
  }

  .header__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.form-box {
  margin-top: 10px;
}
.form-info {
  margin-bottom: 20px;
}
.header-btns {
  text-align: right;
}

.el-icon-info {
  margin-left: 10px;
  font-size: 16px;
}

.labelFlag {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.margin-right {
  margin-right: 8px;
}
.red {
  background: red;
  @extend .margin-right;
}
.yellow {
  background: yellow;
  @extend .margin-right;
}
.gray {
  background: gray;
  @extend .margin-right;
}
</style>
